<template>
	<view class="main-container">
		<HeaderBar title="网红之州" :titleColor="titleColor" :navBarBgc="headerBgc" :isFixed="true"></HeaderBar>
		<view class="swiper-container">
			<image class="clod-image1"
				src="http://img.abatour.com/2025-05-06/图层 809_1746516701560.png" mode="widthFix" alt=""/>
				<image class="clod-image2"
				src="http://img.abatour.com/2025-05-06/图层 810_1746516896325.png" mode="widthFix" alt=""/>
				<image class="clod-image3"
				src="http://img.abatour.com/2025-05-06/图层 811_1746516931917.png" mode="widthFix" alt=""/>
				<image class="title-img"
				src="http://img.abatour.com/2025-05-06/在阿坝，每一帧都出片@2x_1746508481844.png" mode="widthFix" alt=""></image>
				<image class="top-panda"
				src="http://img.abatour.com/2025-05-06/阿坝一机游定稿.cdr_247711@2x_1746508274179.png" mode="widthFix" alt=""></image>
		</view>
		<view class="influence-content-box"> 
			<view class="influence_content">
				<view class="influence-tab-list">
					<view class="influence-tab-item" @click="changeTab(item)" v-for="item in tabsList" :key="item.code" :class="active==item.code?'isActive':''">
						{{item.name}}
					</view>
				</view>
					  <view class="vlog-container">
						<VlogList ref="VLoglistRef" :type="3" @selectItem="selectVlog"></VlogList>
					  </view>
				
				<wd-gap safe-area-bottom height="40"></wd-gap>
			</view> 
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import HeaderBar from "@/components/HeaderBar/index.vue";
	import VlogList from "../components/VLogList.vue";
	import {commonWordList} from "@/api/system";
	const tabsList= ref ()
	const active = ref('1')
	const headerBgc = ref("transparent");
	const titleColor = ref("#2D2D2D");
	const clickLoading = ref(false);
	const VLoglistRef = ref('');


	const changeTab = (item) => {
		if(active.value==item.code) return
		active.value=item.code||'1'
		VLoglistRef.value?.initData(item.code)
	};
	// const selectVlog = (id) => {
	// 	console.log(id)
	// 	uni.navigateTo({
	// 		url:"/fiveMajorSubPack/pages/influence/article?id="+id
	// 	})
	// };

	const gotoAllNews = () => {
		uni.navigateTo({
			url:"/fiveMajorSubPack/pages/hospitable/newsList"
		})
	};

	const gotoCallBack = () => {
		uni.navigateTo({
			url:"/fiveMajorSubPack/pages/hospitable/callbackInput"
		})
	};
	const selectVlog = (id) => {
		
			if(clickLoading.value) return
			clickLoading.value=true
			uni.navigateTo({
				url:"/fiveMajorSubPack/pages/hospitable/newsDetail?id="+id+"&title=网红之州",
				complete(){
					clickLoading.value=false
				}
			})
		};
	onPageScroll((e) => {
		if (e.scrollTop > 110) {
			headerBgc.value = "#ffffff";
			titleColor.value = "#2D2D2D";
		} else {
			headerBgc.value = "transparent";
			titleColor.value = "#2D2D2D";
		}
	})

	onReachBottom(() => {
		console.log("reachBottom");
	})
	onLoad(async()=>{
		const {result} = await commonWordList({
		  keys:"INTERNET_CELEBRITY_STATE_TAG"
		})
		tabsList.value=result['INTERNET_CELEBRITY_STATE_TAG']||[]
		active.value=tabsList.value[0].code||'1'
		VLoglistRef.value?.initData(active.value)
	})
</script>

<style lang="scss" scoped>
	.vlog-container{
		padding: 30rpx 0;
	}
	.influence-content-box{
		position: absolute;
		width: 100%;
		top:796rpx
	}
	.influence_content{
		border-radius: 10rpx;
		box-sizing: border-box;
		width: 100%;
		position: flex;
		flex-direction: column;
		padding: 50rpx 28rpx;
		background-color: #EEEFE7;
		.influence-tab-list{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.influence-tab-item{
			font-size: 29rpx;
			color: #2B2B24;
		}
		.isActive{
			color: #1B9C61;
			font-weight: bold;
			font-size: 33rpx;
			position: relative;
		}
		.isActive::after{
			content: '';
			position: absolute;
			width: 63rpx;
			height: 4rpx;
			border-radius: 2rpx;
			background-color: #1B9C61;
			bottom: -13rpx;
			left:50%;
			transform: translate(-50%,0);
		}
		
	}
	.main-container {
		min-height: 100vh;
		background-color:#EEEFE7;
		overflow-x: hidden;
		:deep(.swiper-container) {
			width: 100%;
			height: 856rpx;
			// margin-top: -100rpx;
			position: relative;
			--wot-swiper-radius: 0;
			background-image: url('http://img.abatour.com/2025-05-06/图层 730@2x_1746508215565.png');
			background-position: center center;
			background-size: 100% 100%;
		}
		.title-img{
			z-index: 100;
			position: absolute;
			top: 240rpx;
			left:110rpx;
			width: 527rpx;
		}
		.top-panda{
			z-index: 100;
			position: absolute;
			bottom: 0;
			left:0;
			width: 100%;
		}
		.clod-image{
			position: absolute;
			top: 198rpx;
			left: 4rpx;
			width: 416rpx;
			height: 409rpx;
			animation: codeMove 20s 1s linear infinite;
		}
		.clod-image1{
					position: absolute;
					top: 568rpx;
					left: 250rpx;
					width: 390rpx;
					// animation: codeMove 15s 1s cubic-bezier(0.4, 0, 0.3, 1) infinite;
					 animation: 
					    horizontalMove 30s linear infinite,
					    verticalFloat 4s ease-in-out infinite alternate;	
				}
				.clod-image2{
					position: absolute;
					top: 418rpx;
					left: 40rpx;
					width: 331rpx;
					// animation: codeMove2 18s 2s cubic-bezier(0.4, 0, 0.3, 1) infinite;
					  animation: 
					    horizontalMove 40s linear infinite,
					    verticalFloat 5s ease-in-out infinite alternate;
				}
				.clod-image3{
					position: absolute;
					top: 290rpx;
					left: 540rpx;
					width: 370rpx;
					// animation: codeMove 20s 0.3s cubic-bezier(0.4, 0, 0.3, 1) infinite;
					animation: 
					    horizontalMoveReverse 35s linear infinite,
					    verticalFloat 3.5s ease-in-out infinite alternate;
				}
				@keyframes horizontalMove {
				  from { transform: translateX(-100%); }
				  to { transform: translateX(100vw); }
				}
				
				@keyframes horizontalMoveReverse {
				  from { transform: translateX(100vw); }
				  to { transform: translateX(-100%); }
				}
				
				@keyframes verticalFloat {
				  from { transform: translateY(-10px); }
				  to { transform: translateY(10px); }
				}

		.hospitable-restaurant-header {
			.restaurant-logo {
				width: 190.97rpx;
				height: 48.61rpx;
			}
		}
		
	}
</style>